<template>
    <div>        
        <el-row class="sceneName">
            <el-col :span="12" class="titleName">
                <span><label>场景功能：</label>滚屏播报</span>
            </el-col>
            <el-col :span="12" style="text-align:right;">
                <label>场景页名称：</label>
                <el-input
                    style="width: 260px"
                    placeholder="滚屏"
                    v-model="sceneName"
                    clearable>
                </el-input>
                <el-button type="primary" @click.stop="alterSceneName()">修改</el-button>
            </el-col>
        </el-row>                    
        <div class="scenePage">    
            <el-row>
                <el-col :span="24">
                    <el-tabs class="screenTabs" value="basics"  @tab-click="handleClick">
                        <el-tab-pane label="基本功能" name="basics">
                            <basicsSetting ref="basicsSetting" :sceneName="sceneName">
                            </basicsSetting>
                        </el-tab-pane>
                        <el-tab-pane label="互动管理员" name="admin">
                            <interactAdmin ref="interactAdmin">
                            </interactAdmin>
                        </el-tab-pane>
                        <el-tab-pane label="滚屏数据管理" name="dataManage">
                            <dataManagement ref="dataManagement" :screenData="screenData">
                            </dataManagement>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </div>
        <footerButtons @save="saveData"></footerButtons> <!-- @cancel=""-->
    </div>
</template>

<script>
    import basicsSetting from './scrollScreenChips/basicsSetting';
    import interactAdmin from './scrollScreenChips/interactAdmin';
    import dataManagement from './scrollScreenChips/dataManagement';
    import { deepCopy } from '@/utils/util';
    export default {
        name: 'scrollScreen',
        data() {
            return {
                sceneName: '',
                screenData: []
            };
        },
        components: {
            basicsSetting,
            interactAdmin,
            dataManagement
        },
        // created() {
        //     this.$refs.basicsSetting.screenElements.name ? this.sceneName = this.$refs.basicsSetting.screenElements.name : this.sceneName = this.$route.name; 
        // },
        mounted() {
            if(typeof this.$route.name !== "number"){ 
                this.sceneName = this.$route.name;
            }            
            this.$bus.$on('nameRefresh', (sceneName) => {
                this.sceneName = sceneName
            })
            this.$bus.$on('getScreenData', (screenData)=>{
                this.screenData = deepCopy(screenData)
            })
        },
        methods: {
            alterSceneName(){ //修改场景名
                if(!this.sceneName){
                    this.$message.warning('场景名不能为空喔！');
                    return false;
                }else{
                    let chil = this.$refs.basicsSetting,type = "alterName";
                    chil.screenElements.name = this.sceneName; //修改子组件值
                    chil.savePage(true, type);   //调子组件方法 
                }
            },
            handleClick(val,event){
                let childen = this.$refs.dataManagement;
                if(val.label === "滚屏数据管理"){
                    childen.currentItem(this.screenData,1);
                }
            },
            saveData(){
                let chil = this.$refs.basicsSetting;
                    chil.savePage(true);
            }
        }
    };
</script>

<style scoped lang="scss">
    .scenePage{
        width: calc(100% - 40px);
        height: calc(100% - 60px);
        padding:10px 20px 0 20px;
        border-radius: 10px;
        position: relative;
        background-color: #fff;
        margin: 10px auto 85px; 

        #tab-basics.is-active{
            font-weight: 600!important;
        }       
    }
    .sceneName{
        padding:20px 20px 0px 0px;
    }
    .el-row {
        margin-bottom: 20px;
        width: 100%;
    }
    .titleName{
        padding-left: 20px;
        font-size: 24px;
    }
    .titleName label{
        font-size: 14px;
        margin-right: 10px;
    }
</style>